<template>
  <div>
    <el-popover
      placement="right"
      width="280"
      trigger="click">
      <ul class="icon-warp">
        <li v-for="(item,index) in icons " :key="index" :class="{activity:item===icon}" @click="icon=item;$emit('update:icon', item)" >
          <span :class="getclass(item)"/>
        </li>
      </ul>
      <span slot="reference" :class="iconclass" />
    </el-popover>

  </div>
</template>

<script>

export default {
  components: { },
  props: {
    icon: {
      tyep: String,
      defalut: ''
    }
  },
  data() {
    return {
      icons: [
        'icon-shouye',
        'icon-shezhi',
        'icon-duoyuyan',
        'icon-24xiaoshiqiantai',
        'icon-zonghe',
        'icon-xitongcaidan1',
        'icon-shoucangfill',
        'icon-shangjiarenzheng',
        'icon-yunweiguanli',
        'icon-dingdan',
        'icon-qiye',
        'icon-cheliang'
      ]
    }
  },
  computed: {
    iconclass() {
      const cls = { iconfont: true }
      cls[this.icon] = true
      return cls
    }
  },
  methods: {
    getclass(ic) {
      const cls = { iconfont: true }
      cls[ic] = true
      return cls
    }
  }
}
</script>

<style scoped>
  .icon-warp{
    width: 100%;
  }
  .icon-warp li{
    float: left;
    cursor: pointer;
    padding:5px 15px;
  }
  .icon-warp li.activity{
     color: white;
     background: #FAC400;
  }
</style>
